<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>知识库助手</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body class="bg-gray-100">
    <div class="container mx-auto px-4 py-8">
        <!-- 知识库管理 -->
        <div class="mb-8">
            <h2 class="text-2xl font-bold mb-4">知识库管理</h2>
            <div class="bg-white rounded-lg shadow p-6">
                <div class="mb-4">
                    <input type="text" id="kb-name" placeholder="知识库名称" class="border p-2 rounded w-full mb-2">
                    <textarea id="kb-desc" placeholder="知识库描述" class="border p-2 rounded w-full mb-2"></textarea>
                    <select id="embedding-model" class="border p-2 rounded w-full mb-4">
                        <option value="nomic-embed-text">nomic-embed-text</option>
                    </select>
                    <div class="flex space-x-2">
                        <button onclick="createKnowledgeBase()" class="bg-blue-500 text-white px-4 py-2 rounded">
                            创建知识库
                        </button>
                        <button onclick="refreshKnowledgeBases()" class="bg-gray-500 text-white px-4 py-2 rounded">
                            刷新列表
                        </button>
                    </div>
                </div>
                <div id="kb-list" class="space-y-2">
                    <!-- 知识库列表将通过 JS 动态加载 -->
                </div>
            </div>
        </div>

        <!-- 文档管理 -->
        <div class="mb-8">
            <h2 class="text-2xl font-bold mb-4">文档管理</h2>
            <div class="bg-white rounded-lg shadow p-6">
                <div class="mb-4">
                    <select id="kb-select" class="border p-2 rounded w-full mb-2">
                        <!-- 知识库选项将通过 JS 动态加载 -->
                    </select>
                    <input type="file" id="doc-file" class="border p-2 rounded w-full mb-4" multiple 
                           accept=".txt,.pdf,.doc,.docx,.csv,.xlsx">
                    <div class="flex space-x-2">
                        <button onclick="uploadDocument()" class="bg-green-500 text-white px-4 py-2 rounded">
                            上传文档
                        </button>
                        <button onclick="previewSplit()" class="bg-yellow-500 text-white px-4 py-2 rounded">
                            预览分段
                        </button>
                    </div>
                </div>
                <div id="doc-list" class="space-y-2">
                    <!-- 文档列表将通过 JS 动态加载 -->
                </div>
            </div>
        </div>

        <!-- 对话界面 -->
        <div>
            <h2 class="text-2xl font-bold mb-4">智能对话</h2>
            <div class="bg-white rounded-lg shadow p-6">
                <div class="mb-4">
                    <select id="chat-kb-select" class="border p-2 rounded w-full mb-2">
                        <!-- 知识库选项将通过 JS 动态加载 -->
                    </select>
                    <select id="chat-model" class="border p-2 rounded w-full mb-2">
                        <option value="llama2">Llama2</option>
                        <option value="mistral">Mistral</option>
                        <option value="mixtral">Mixtral</option>
                    </select>
                    <select id="system-prompt" class="border p-2 rounded w-full mb-2">
                        <option value="">默认系统提示词</option>
                        <!-- 系统提示词模板将通过 JS 动态加载 -->
                    </select>
                </div>
                <div id="chat-messages" class="h-96 overflow-y-auto border rounded p-4 mb-4">
                    <!-- 对话消息将通过 JS 动态加载 -->
                </div>
                <div class="flex space-x-2">
                    <input type="text" id="chat-input" placeholder="输入问题..." 
                           class="border p-2 rounded flex-1"
                           onkeypress="if(event.keyCode==13) sendMessage()">
                    <button onclick="sendMessage()" class="bg-blue-500 text-white px-4 py-2 rounded">
                        发送
                    </button>
                    <button onclick="stopChat()" class="bg-red-500 text-white px-4 py-2 rounded">
                        停止
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script src="/static/js/main.js"></script>
</body>
</html> 